<!--
 * @Descripttion: 公共的头文件
 * @Author: maybe
 * @Date: 2019-06-24 17:51:21
 -->

<template>
    <div class="header">       
      <el-row >       
            <el-menu         
              class="el-menu-demo clearfix text-center"
              mode="horizontal"          
              text-color="#fff"
              active-text-color="#4ec2e3"
              @select="handleSelect">    
                  <el-menu-item index="0" class="pull-left"> <img src="./image/column.png" alt="" style="vertical-align: 0px;"> 栏目</el-menu-item>
                  <el-menu-item index="1" class="pull-left">下载中心</el-menu-item>
                  <el-menu-item index="3" class="pull-left"><img  src="./image/ch.png" alt=""></el-menu-item>  
                  <a class="title" @click="goHome()">DC Option</a>

                  <el-submenu class="pull-right hide" index="6">
                    <template slot="title">语言</template>
                    <el-menu-item index="6-1">中文</el-menu-item>
                    <el-menu-item index="6-2">英文</el-menu-item>
                  </el-submenu>           
                  <el-menu-item class="pull-right hide" index="4">平台下载</el-menu-item>
                 
                  <el-menu-item v-if="!$store.state.userInfo.nickName" class="pull-right" index="5">登录</el-menu-item>
                  <el-menu-item v-if="!$store.state.userInfo.nickName" class="pull-right" index="7">注册</el-menu-item>
                  <el-submenu class="pull-right" v-if="$store.state.userInfo.nickName" index="8">
                    <template slot="title"><img src="./image/icon-user.png" width="34" alt=""> {{$store.state.userInfo.nickName.substring(0,8)}}</template>
                    <el-menu-item index="8-1" style="width:167px;">个人中心</el-menu-item>
                    <el-menu-item index="8-2" style="width:167px;">退出登录</el-menu-item>
                  </el-submenu>  
            </el-menu>                     
      </el-row>    
      
      <div class="head-content" v-show="headState == 'column'">
          <div>
             <h6><span>关于公司</span></h6>
             <h6><span>教育培训</span></h6>
             <h6><span>交易规则</span></h6>
          </div>
      </div>
      <div class="head-content text-center padding-0" v-show="headState == 'download'">
          <div class="div-download">
            <div>
              <img src="./image/apple.png" alt="ios下载">
              <p><strong>ios</strong></p>
              <p class="font-gray">8.0以上</p>
              <button class="btn-download aqua-button hand padding-0">下载</button>
            </div>
          </div>
           <div class="div-download">
             <div>
              <img src="./image/android.png" alt="ios下载">
              <p><strong>ios</strong></p>
              <p class="font-gray">8.0以上</p>
              <button class="btn-download aqua-button padding-0 hand">下载</button>
              </div>
          </div>
      </div>
    </div>
</template>
<script>
import Cookies from "js-cookie"
import {mapActions, mapState} from 'vuex'
export default {
    name: 'Header',
    data() {
      return {
        activeIndex: '0',
        activeIndex2: '0',
        subRouteUrl: ['/home/about','/transaction','','','','/login','','/register'],
        headState:''
      };
    },
    methods: { 
      ...mapActions(['logOut']),
      handleSelect(key, keyPath) { 
        switch(key){
          case '0':
          this.headState = this.headState == 'column'?'':'column';
          break;
          case '1':
          this.headState = this.headState ==  'download' ? '' : 'download';
          break;
          case '5':
          this.headState = "";
          this.$router.push({path:'login'})
          break;
          case '7':
          this.headState = "";
          this.$router.push({path:'register'})
          break;
          case '8-1':
          this.headState = "";
          this.$router.push({path:'user/index'})
          break;
          case '8-2':
          this.headState = "";
          this.logOut();
          break;
        }              
      },
      goHome(){
        this.headState = "";
        this.$router.push({path:'home'})
      } 
  }
}
</script>

<style lang='less'>
 .el-menu--horizontal>.el-submenu .el-submenu__title:hover{background-color: #252647}
 .el-menu--popup{background-color: rgba(42,43,72,0.2)}
 .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {background-color: #252647}
</style>
<style lang="less" scoped>
  .header{
    position: relative;
    border-bottom: 2px solid #14152d;
     .title{border: none;font-size: 20px;color: #fff;line-height: 60px;font-weight: bolder}
    .el-row{max-width: 1300px;margin: 0 auto;min-width: 980px;}
     ul.el-menu.el-menu--popup.el-menu--popup-bottom-start {min-width:124px;text-align: center;} 
    .el-menu.el-menu--horizontal {background-color: inherit;}
    .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{background: rgba(41,42,72,0.5)}
    .el-menu.el-menu--horizontal{border-bottom: none;} 
    
    .head-content{position: absolute;z-index: 222;display: block;width: 100%;padding: 40px 17%;line-height: 50px;font-size: 16px;background-color: #252647;
      .div-download{display: inline-block;width: 290px;background-color: #252647; margin: 40px; margin-top: 80px;padding: 10px;box-sizing: border-box;
        div{border: 1px solid #4ec2e3;}
        img{margin-top: 40px;}
        strong{font-size: 40px;font-weight: lighter;color: #fff;}
        button{width: 140px;line-height: 30px;border: none;color: #fff;border-radius: 4px;}
      }
      h6{font-weight:100;
        span{cursor: pointer;}
      }
    }
    .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
      background-color: #2a2b48;
    }
  }
   
</style>

